<template>
  <div class="login-container">
      <div style="width: 400px; height: 300px; background-color: aqua;margin: 150px auto;border-radius: 10px">
        <div style="text-align: center; color: green; height: 50px; line-height: 70px">欢迎登录</div>
        <div style="text-align: center; color: blue;margin-top: 50px">
          <el-form :model="admin" label-width="80px">
            <el-form-item label="账号" style="margin-left: 10px">
              <el-input v-model="admin.name" prefix-icon="el-icon-user"  @keyup.enter="login" placeholder="请输入用户名" style="margin-left: -30px;width: 95%;"></el-input>
            </el-form-item>
            <el-form-item label="密码" style="margin-left: 10px">
              <el-input type="password" v-model="admin.password" @keyup.enter="login" prefix-icon="el-icon-lock" placeholder="请输入密码" style="margin-left: -30px;width: 95%;"></el-input>
            </el-form-item>
            <el-form-item label="验证码" style="margin-left: 25px">
              <div style="display: flex; justify-content: center">
                <el-input v-model="admin.verCode" prefix-icon="el-icon-user" style="margin-left: -20px;width: 42%; margin-right: 7px;" placeholder="验证码"></el-input>
                <img :src="captchaUrl" @click="clickImg()" width="140px" height="33px">
              </div>
            </el-form-item>
            <el-form-item style="margin-left: 60px; margin-right: 100px">
              <el-button type="primary" @click="login()">登录</el-button>
            </el-form-item>
          </el-form>
          未有账号？<a href="javascript:void(0);" style="text-decoration: none" @click="navRegister">点击注册</a>
        </div>
      </div>
  </div>
</template>


<script>

import request from "@/utils/request";

export default {
  name: 'Login',
  data() {
    return {
      admin:{},
      captchaUrl:'' , // 后端验证码接口地址
      key: '',  // 接口验证码携带的唯一key
    }
  },
  // 页面加载时
  created() {
    //这是给验证码使用的
    this.key = Math.random();
    this.captchaUrl = 'http://localhost:8080/api/capture?key=' + this.key;
  },
  // 页面按钮触发事件时使用的方法
  methods: {
    //1. 登录
    login(){
      request.post('/admin/login?key=' + this.key,this.admin).then(res => {
          if (res.code === '0'){
            this.$message.success('登录成功')
            // 清空输入框
            this.admin.name = '';
            this.admin.password = '';
            // 登录成功，跳转首页
            localStorage.setItem('user',JSON.stringify(res.data)); //存储的时候存字符串
            this.$router.push('/');
          }else {
            this.$message.error(res.msg)
            // 登录失败，重新刷新验证码
            this.key = Math.random();
            this.captchaUrl = 'http://localhost:8080/api/capture?key=' + this.key;
            this.admin.verCode = '';//清空验证码
          }
        }
      )
    },

    //2.点击注册
    navRegister(){
      this.$router.push("/register");
    },

    clickImg(){
      this.key = Math.random();
      this.captchaUrl = 'http://localhost:8080/api/capture?key=' + this.key;
    }
  }
}
</script>


<style scoped>
    .login-container {
        height: 100vh;
        overflow: hidden;
        background-image: url('../assets/login-bg.jpg');
        background-size: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>